<template>
	<view class="u-p-30 u-white-bg">
		<u-form :model="form" ref="uForm" label-width="180">
			<u-form-item label="姓名" prop="realName">
				<u-input v-model="form.realName" />
			</u-form-item>
			<u-form-item label="性别" prop="genderText">
				<u-input v-model="form.genderText" type="select" @click="show = true" />
				<u-select :list="list" v-model="show" @confirm="confirm"></u-select>
			</u-form-item>
			<u-form-item label="手机号" prop="mobilePhone">
				<u-input v-model="form.mobilePhone" />
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" type="password" />
			</u-form-item>
			<u-form-item label="确认密码" prop="password2">
				<u-input v-model="form.password2" type="password" />
			</u-form-item>
		</u-form>
		<view class="u-p-t-20">
			<u-button type="primary" @click="submit">注册</u-button>
		</view>
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	
	export default {
		data() {
			return {
				list: [
					{value: 0, label: '保密'},
					{value: 1, label: '男'},
					{value: 2, label: '女'}
				],
				form: {
					employNo: '',
					account: '',
					realName: '',
					gender: '',
					mobilePhone: '',
					managerId: '1',
					organizeId: '1',
					positionId: '1',
					roleId: '1',
					genderText: '',
					password: '',
					password2: ''
				},
				show: false,
				rules: {
					realName: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['blur', 'change']
						}
					],
					genderText: [
						{
							required: true,
							message: '请选择性别',
							trigger: ['change']
						}
					],
					mobilePhone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value)
							},
							message: '手机号不正确',
							trigger: ['blur', 'change']
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						}
					],
					password2: [
						{
							required: true,
							message: '请输入确认密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return this.form.password === value
							},
							message: '两次密码输入不一致',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.form.employNo = 'G' + this.$u.timeFormat(new Date(), 'yymmddhhMMss')
						this.form.account = this.form.mobilePhone
						this.form.password = md5Libs.md5(this.form.password)
						this.$u.api.signUp(this.form).then(res => {
							this.$u.toast('注册成功')
							this.$u.route({type: 'redirectTo', url: 'pages/users/sign-in'})
						}).catch(err => {
							console.error(err)
						})
					}
				})
			},
			confirm(e) {
				this.form.gender = e[0].value
				this.form.genderText = e[0].label
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>

</style>
